<template>
	<view class="content">
		<view class="ul justify-evenly">
			<view :class="['li',{active:current==index}]" v-for="(item,index) in list" :key="index" @click="current=index">{{item.name}}</view>
		</view>
		<!-- <u-tabs class="tabs" :list="list" :is-scroll="false" :current="current" :scrollable="false" @click="tabFn"></u-tabs> -->
		<swiper class="swiper" :current="current" @change="(e)=>{current=e.detail.current}">
			<swiper-item class="swiper-item1">
				<view class="growth">
					<view class="title">当前所在周期：{{nowGrowth}}</view>
					<view class="list justify-between">
						<view class="item flex-col align-center">
							<view class="icon">
								<image class="image"
									src=""
									mode=""></image>
							</view>
							<view class="title">定值时间</view>
							<view class="time">{{$util.timestampToTime(info.colonizationTime).slice(0,10)}}</view>
						</view>
						<view class="item flex-col align-center">
							<view class="icon">
								<image class="image"
									src=""
									mode=""></image>
							</view>
							<view class="title">种植时间</view>
							<view class="time">{{$util.timestampToTime(info.plantTime).slice(0,10)}}</view>
						</view>
						<view class="item flex-col align-center">
							<view class="icon">
								<image class="image"
									src=""
									mode=""></image>
							</view>
							<view class="title">采收时间</view>
							<view class="time">{{$util.timestampToTime(info.harvestTime).slice(0,10)}}</view>
						</view>
					</view>
					<view class="position">
						<view class="text" v-if="$util.getDictData('planting_status',info.plantStatus)=='已种植'"
							style="background: #fc6f21;">{{$util.getDictData('planting_status',info.plantStatus)}}</view>
						<view class="text" v-if="$util.getDictData('planting_status',info.plantStatus)=='种植中'"
							style="background: #53936c;">{{$util.getDictData('planting_status',info.plantStatus)}}</view>
						<view class="text" v-if="$util.getDictData('planting_status',info.plantStatus)=='已完成'"
							style="background: #999999;">{{$util.getDictData('planting_status',info.plantStatus)}}</view>
					</view>
				</view>
				<u-steps :current="nowIndex" direction="column" active-color="#53936c"
					inactive-color="#999999">
					<u-steps-item :title="item.name" :desc="$util.timestampToTime(item.time).slice(5,10)"
						v-for="item in growthDataList" :key="item.id"></u-steps-item>
				</u-steps>
			</swiper-item>
			<swiper-item class="swiper-item2">
				<view class="plantInfo flex-row">
					<view class="icon">
						<image class="image" src="/subPages/static/index/product/avatar.png" mode=""></image>
					</view>
					<view class="main flex-col justify-around">
						<view class="title">{{info.cropVarieties}}</view>
						<view>作物种类:{{$util.getDictData('produce_info_crop_specie',info.cropSpecie)}}</view>
						<view>种子名称:{{info.seedName}}</view>
						<view>使用量:{{info.usage}}袋</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item3">
				<view class="plantInfo flex-row">
					<view class="icon">
						<image class="image" src="/subPages/static/index/product/map.png" mode=""></image>
					</view>
					<view class="main flex-col justify-around">
						<view class="title">地块面积:{{info.plantArea}}亩</view>
						<view style="white-space:pre-wrap;">地块编码:{{'\n'+info.landCode.split(',').join('\n')}}</view>
						<view>种植标准:{{$util.getDictData('planting_standard_type',info.plantStandards)}}</view>
						<view>种植状态:{{$util.getDictData('planting_status',info.plantStatus)}}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		
	</view>
</template>

<script>
import {getColmunOne, getProductOne} from '@/api/index/product.js'

export default {
		data() {
			return {
				id: null,
				info: {},
				growthDataList: [],
				nowIndex: 0,
				nowGrowth: '',
				list: [{
					name: '生长周期'
				}, {
					name: '农作物'
				}, {
					name: '土地'
				}],
				current: 0,
			}
		},
		methods: {
			tabFn(item) {
				this.current = item.index;
			},
			async getProductOneFn() {
				let res = await getProductOne({
					id: this.id
				});
				this.info = res;
				// 获取生长模型
				let res1 = await getColmunOne({
					id: this.info.growthId
				});
				this.growthDataList = res1.growthModuleListDOS[0].growthModuleDataDOS;
				// 计算模型时间 
				let tempTime = this.info.plantTime;
				let nowTime = Date.now();
				this.growthDataList.sort((a, b) => a.sort - b.sort);
				this.growthDataList.forEach((item, index, arr) => {
					item.time = tempTime + item.times * 24 * 60 * 60 * 1000;
					tempTime = item.time;
					if (nowTime > item.time) {
						// 当前时间大于周期时间 激活下一个周期的索引 如果是最后一个周期就是最后一个周期的索引是
						this.nowIndex = index == arr.length - 1 ? index : index + 1;
						this.nowGrowth = arr[this.nowIndex].name;
					}
				})
			},
		},
		onLoad(options) {
			this.id = options.id;
			this.getProductOneFn();
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 0 1rem;

		// tab
		.ul{
			height: 40rpx;
			padding: 10rpx 0;
			.li{
				font-size: 28rpx;
				position: relative;
				&:before{
					position: absolute;
					bottom: -25rpx;
					left: 50%;
					transform: translate(-50%);
					content:"";
					height:5rpx;
					width: 0;
					background: #30a669;
					transition: all .3s linear;
				}
			}
			.li.active{
				color: #30a669;
				&:before{
					width: 100%;
				}
			}
		}
		.swiper{
			height: calc(100vh - 44px - 80rpx);
		}
		.plantInfo {
			box-shadow: -0.1rem 0.3rem 0.6rem 0.1rem rgba(153, 153, 153, .3);
			margin: 1rem 0;
			border-radius: 1rem;
			background: #fcfcfc;

			.icon {
				margin: 1rem;

				.image {
					height: 10rem;
					width: 10rem;
					border-radius: 50%;
				}
			}

			.main {
				padding: .6rem 0;
				font-size: 1.5rem;

				.title {
					font-size: 1.6rem;
					font-weight: bold;
				}
			}
		}

		.growth {
			box-shadow: -0.1rem 0.3rem 0.6rem 0.1rem rgba(153, 153, 153, .3);
			margin: 1rem 0;
			border-radius: 1rem;
			background: #fcfcfc;
			padding: 1rem;
			position: relative;

			.title {
				font-size: 1.8rem;
				margin-bottom: 1rem;
			}

			.list {
				.item {
					.icon {
						.image {
							height: 3rem;
							width: 3rem;
						}
					}

					.title {
						font-size: 1.5rem;
						color: #888;
						margin: .5rem 0;
					}

					.time {
						font-size: 1.5rem;
					}
				}
			}

			.position {
				position: absolute;
				top: 0;
				right: 0;

				.text {
					border-radius: 0 1rem 0 0;
					padding: .2rem;
					color: #fff;
				}
			}
		}

		.u-steps {
			/deep/ .u-steps-item {
				.u-steps-item__content {
					margin-left: .6rem !important;

					.u-text {
						.u-text__value {
							font-size: 1.4rem !important;
							margin: .15rem 0;
						}
					}
				}

				.u-steps-item__wrapper {
					.u-steps-item__wrapper__circle {
						height: 2rem;
						width: 2rem;

						.u-steps-item__wrapper__circle__text {
							span {
								font-size: 1.5rem !important;

							}
						}

						.u-icon {
							.u-icon__icon {
								span {
									font-size: 1.5rem;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
